<template>
	<view class="order_list">
		
		<view class="search_box">
			<view class="search">
				<image class="s_img" src="../../static/images/search.png" mode=""></image>
				<input class="input" v-model="keywords" type="text" placeholder="搜索订单">
			</view>
		</view>
		<view class="list_top" style="position: relative;top: 50px;">
			<view class="list"  @click="showPicker('date')">
				<view>{{year}}年{{month}}月</view>
				<image v-if="isShow" class="b_img" src="../../static/images/bottom.png" mode=""></image>
				<image v-else class="b_img" src="../../static/images/top.png" mode=""></image>
			</view>
			<view class="num">当月订单数量：{{allnum}}</view>
		</view>
		<view class="order_box">
			<view class="list_box">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="list_top">
						<image class="o_img" :src="item.goodImgSrc" mode=""></image>
						<view class="list_top_right">
							<view class="name">{{item.goodName}}-{{item.title}}</view>
							<view class="huoli">{{item.price}}</view>
							<view class="num_box">
								<view>金额:<text class="jifen">{{item.allPrice}}</text></view>
								<view class="num">数量:x{{item.allNum}}</view>
							</view>
						</view>
					</view>
					<view class="orde_num">
						<view>订单编号：</view>
						<view class="hao">{{item.orderNumber}}</view>
					</view>
					<view class="orde_num">
						<view>下单时间：</view>
						<view class="hao">{{item.created_at}}</view>
					</view>
					<view class="orde_num">
						<view>方式：</view>
						<view class="hao">{{item.logTypeTitle}}</view>
					</view>
					<view class="orde_num">
						<view>状态：</view>
						<view class="hao">{{item.statusTitle}}</view>
					</view>
					<view class="orde_num" v-show="item.logType == 1 && item.status == 3" @click="copynum(item.logNumber)">
						<view>单号：</view>
						<view class="hao">{{item.logNumber}}</view>
					</view>
					<view class="orde_num" style="justify-content: space-between;" v-show="item.logType == 2">
						<view>提货信息：<text class="hao">{{item.pickName}}({{item.pickPhone}})</text></view>
						<view class="ziti" v-show="(item.status==2) && item.logType==2" @click="hexiao(item.id)">核销</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layer_box_pass" v-show="ispLayer">
			<view class='lay_tit' >
				<view class="title1" >
					<view>核销码</view>
					<view @click="ispLayer=false">关闭</view>
				</view>
				<view class="title">
					<input v-model="pass" type="password" style="width:100%;height: 90rpx;background: #cccccc;padding: 20rpx;">
				</view>
				<view class="title2" >
					<view style="width:100%;" @click="surepass">确定</view>
				</view>
			</view>
		</view>
		<w-picker mode="date" fields="month" @confirm="onConfirm($event,'date')" @cancel="onCancel" ref="date" ></w-picker>
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue';
	import uniLoadMore from "@/components/uni-load-more.vue" 
	export default {
		components: {
			uniLoadMore,
			wPicker
		},
		data() {
			return {
				isShow:true,
				loadingType: 0,
				keywords:'',
				year:'',
				month:'',
				userinfo:[],
				list:[],
				allnum:'',
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				ispLayer:false,
				pass:'',
				sureOrderId:0
			}
		},
		onLoad(options) {
			var date = new Date();
			this.year = date.getFullYear();
			this.month = date.getMonth() + 1;
			this.month = (this.month>10)?this.month:'0'+this.month;
			uni.setNavigationBarTitle({
				title:'全部订单'
			})
			this.id=options.id;
			this.userinfo=uni.getStorageSync('user');
			this.getinfo();
		},
		methods: {
			copynum(str){
				uni.setClipboardData({
				    data: str,
				    success: function () {
				        uni.showToast({
				        	title: '复制成功',
				        	icon: 'none'
				        })
				    }
				})
			},
			surepass(){
				if(this.pass==''||this.pass==null||this.pass==undefined){
					uni.showToast({
						icon:'none',
						title:'请输入核销码'
					})
					return;
				}
				var that=this;
				this.$http.get('mallshop/orderSure',{'pass':this.pass,'sureOrderId':this.sureOrderId}).
				then(function (response) {
					uni.showToast({
						icon:'none',
						title:response.msg
					})
					if(response.code==-1){
						
						return;
					}else{
						that.ispLayer=false;
						
						that.getinfo();
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			showPicker(type) {
				this.$refs[type].show();
				this.isShow = !this.isShow;
			},
			onConfirm(res, type) {
				this.isShow = !this.isShow;
				switch (type) {
					case "date":
						this.year = res.obj.year;
						this.month = res.obj.month;
						break;
				}
				this.getinfo();
			},
			onCancel(){
				this.isShow = !this.isShow;
			},
			getinfo(){
				var that=this;
				this.$http.get('mallshop/getOrderTongji',{id:that.id,keywords:this.keywords,month:this.month,year:this.year}).
				then(function (response) {
					that.info=response.data.info;
					that.allnum = response.data.allnum;
					that.list = response.data.list;
				}).catch(function (error) {
					console.log(error);
				});
			},
			hexiao(id){
				this.sureOrderId = id;
				this.ispLayer = true;
			}
		},
		//加载更多
		onReachBottom(){
			
		}
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.order_list{
		.list_top{
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.num{
				color: #333;
				font-size: 34rpx;
				font-weight: bold;
			}
			.list{
				font-weight: bold;
				display: flex;
				align-items: center;
				color: #333;
				font-size: 34rpx;
				.b_img{
					margin-left: 10rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
		.order_box{
			padding: 130rpx 30rpx 30rpx;
			.list_box{
				.list{
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					padding: 20rpx;
					background: #fff;
					.orde_num{
						display: flex;
						align-items: center;
						color: #999;
						font-size: 28rpx;
						padding-top: 20rpx;
						.hao{
							color: #333;
						}
						.ziti{
							width: 130rpx;
							height: 62rpx;
							background: #6686f5;
							box-shadow: 0 3rpx 20rpx #6686f5;
							border-radius: 31rpx;
							color: #fff;
							font-size: 26rpx;
							text-align: center;
							line-height: 62rpx;
						}
					}
					.list_top{
						display: flex;
						align-items: center;
						padding-bottom: 20rpx;
						border-bottom: 1px solid #e5e5e5;
						.list_top_right{
							flex: 1;
							margin-left: 20rpx;
							.num_box{
								display: flex;
								align-items: center;
								justify-content: space-between;
								color: #6686f5;
								font-size: 28rpx;
								.jifen{
									font-size: 40rpx;
									font-weight: bold;
								}
								.num{
									color: #666;
									font-size: 24rpx;
								}
							}
							.huoli{
								padding: 10rpx 0 20rpx;
								color: #999;
								font-size: 24rpx;
							}
							.name{
								color: #333;
								font-size: 30rpx;
								font-weight: bold;
							}
						}
						.o_img{
							width: 154rpx;
							height: 154rpx;
						}
					}
				}
			}
		}
		.search_box{
			width: 100%;
			box-sizing: border-box;
			position: fixed;
			top: var(--window-top);
			left: 0;
			padding: 0 30rpx 30rpx;
			background-color: #fff;
			z-index: 1;
			.search{
				padding: 14rpx 30rpx;
				display: flex;
				border-radius: 34rpx;
				align-items: center;
				background-color: #f6f6f6;
				.input{
					padding-left: 10rpx;
					flex: 1;
					font-size: 28rpx;
				}
				.s_img{
					width: 32rpx;
					height: 32rpx;
					position: relative;
					padding-right: 10rpx;
					&:after{
						content: '';
						position: absolute;
						width: 1px;
						height: 100%;
						background-color: #999;
						top: 0;
						right: 0;
					}
				}
			}
		}
	}
.layer_box_pass{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	.lay_tit{
		width: 80%;
		height: 350rpx;
		background: #ffffff;
		position: fixed;
		bottom: 50%;
		border-radius: 10rpx;
		.title{
			display: flex;
			flex-wrap: nowrap;
			height:130rpx;
			line-height: 130rpx;
			font-size: 35rpx;
			.coin{
				margin: auto 0;
				width:100rpx;
				height:100rpx;
			}
		}
		.title1{
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			border-bottom: 2px solid #988f8f;
		}
		.title2{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			text-align: center;
		}
	}
	.lay_tit1{
		height: 400rpx;
	}
}
</style>
